<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://localhost:8080/socket.io/socket.io.js"></script>
	<style>
		.main{
			background: green;
		}
	</style>
	<script>
			let sock = io.connect('ws://localhost:8080');

			let oul=document.getElementsById('ul1');
			let olog=document.getElementsById('login');
			let oreg=document.getElementsById('reg');
			let osend=document.getElementsById('send');

			let user=document.getElementsById('user');
			let pass=document.getElementsById('pass');
			let txt=document.getElementsById('txt1');

			let cur_user = '';

			//登录
			olog.onclick=function(){
				sock.emit('longin',ouser.value,opass.value);
			};
			//房子onclick外面。防止重复累加事件
			sock.on('login_rs',(code,msg)=>{//要做输入校验
				if(code){
					alert('登录失败'+msg)
				}else{
					alert('登录成功');
					cur_user=user.value;
				}
			})
			//注册
			oreg.onclick=function(){
				sock.emit('reg',ouser.value,opass.value);
			};
			sock.on('reg_rs',(code,msg)=>{
			//要做输入校验,这里没做
				if(code){
					alert('注册失败'+msg)
				}else{
					// alert('注册成功');
					let oli= document.createElement('li');
					li.className='main';
					li.innerHTML=`<h5>${cur_user}</h5><p>${txt.value}</p>`;

					oul.appendChild(oli);

					txt.value = '';
				}
			});
			//发送
			osend.onclick=function(){
				sock.emit('msg',txt.value);
			};
			sock.on('msg')
			sock.on('msg_rs',(code,msg)=>{
				if(code){
					alert('发送失败：'+msg)
				}else{
					alert('发送成功')
				}
			})
			//
			// olog.onclick=function(){}

	</script>
</head>
<body>
	<div>
		用户名：<input type="text" id="user">
		密码：<input type="text" id="pass">
		<input type="button" value="登录" id="login">

		<input type="button" value="注册" id="reg">
		<br>

		<textarea cols="80" rows="5" id="txt1"></textarea>
		<input type="button" value="发送" id="send"><br>
		<hr>
		<ul id="ul1">
			<!-- <li>
				<h4>assdf</h4>
				<p>zdsfafd</p>
			</li> -->
		</ul>
	</div>
</body>
</html>	